---
import '@/styles/globals.css'
import { Card } from '@/components/ui/card'
import AuthLayout from '@/components/auth-layout.astro'
import { SignUpForm } from '@/components/sign-up-form'

---
<AuthLayout>
  <Card className='p-6'>
    <div class='mb-2 flex flex-col space-y-2 text-left'>
      <h1 class='text-lg font-semibold tracking-tight'>
        Create an account
      </h1>
      <p class='text-sm text-muted-foreground'>
        Enter your email and password to create an account. <br />
        Already have an account?{' '}
        <a
          href='/signin'
          class='underline underline-offset-4 hover:text-primary'
        >
          Sign In
        </a>
      </p>
    </div>
    <SignUpForm />
    <p class='mt-4 px-8 text-center text-sm text-muted-foreground'>
      By creating an account, you agree to our{' '}
      <a
        href='/terms'
        class='underline underline-offset-4 hover:text-primary'
      >
        Terms of Service
      </a>{' '}
      and{' '}
      <a
        href='/privacy'
        class='underline underline-offset-4 hover:text-primary'
      >
        Privacy Policy
      </a>
      .
    </p>
  </Card>
</AuthLayout>
